﻿<!DOCTYPE HTML>
<html>
	<head>
		<title>제주의 말(馬)</title>
		<script type="text/javascript" charset="utf-8">
			var jQT = new $.jQTouch({
				icon : 'jqtouch.png',
				icon4 : 'jqtouch4.png',
				addGlossToIcon : false,
				startupScreen : 'jqt_startup.png',
				statusBar : 'black',
				preloadImages : ['/css/jqtimages/activeButton.png', '/css/jqtimages/back_button.png', '/css/jqtimages/back_button_clicked.png', '/css/jqtimages/blueButton.png', '/css/jqtimages/button.png', '/css/jqtimages/button_clicked.png', '/css/jqtimages/grayButton.png', '/css/jqtimages/greenButton.png', '/css/jqtimages/redButton.png', '/css/jqtimages/whiteButton.png', '/css/jqtimages/loading.gif']
			});

		</script>
		<style type="text/css" media="screen">
			#jqt ul.rounded {
				font: bold 16px "Helvetica Neue", Helvetica;
				opacity: 0.7;
			}
			#container {
				background-image: url(images/intro_img.png);
				background-repeat: no-repeat;
			}
			#jqt .main {
				background-image: url(images/bg_img.png);
				background-repeat: no-repeat;
			}
			#jqt .toolbar > h1 {
				font-size: 18px;
			}
			#jqt .toolbar {
				opacity: 0.7;
			}
			#category {
				margin: 0 auto;
				position: relative;
				top: 30px;
			}
			/* 이미지 슬라이드 관련 CSS */
			#slide {
				margin: 30px auto;
				position: relative;
				border: 0;
				width: 116px;
				height: 116px;
				overflow: hidden;
			}
			#slide ul {
				position: absolute;
				margin: 0;
				padding: 0;
				list-style: none;
				width: 928px;
				height: 116px;
				left: 0;
				border: 0;
			}
			#slide ul li {
				background: transparent;
				border: 0;
				list-style-type: none;
				padding: 0;
				overflow: hidden;
				float: left;
			}
			#slide button {
				font-size: 1em;
				font-weight: bold;
				color: #fff;
				text-shadow: 1px 1px 3px #000;
				border: 0;
				background: transparent;
			}
			#slide p.prev {
				position: absolute;
				bottom: 0;
				left: 0;
			}
			#slide p.next {
				position: absolute;
				bottom: 0;
				right: 0;
			}
			#slide img {
				width: 116px;
				height: 116px;
			}
			/* //이미지 슬라이드 관련 CSS */

			#joy_introduce, #eat_introduce {
				position: relative;
				margin: 0 auto;
				border: 1px solid #a1a1a1;
				background: #dddddd;
				width: 280px;
				border-radius: 10px;
				opacity: 0.7;
				top: 20px;
			}
			#joy_introduce p, #eat_introduce p {
				padding: 10px;
				font-size: 13px;
				color: #000;
			}
			#eat_location li.arrow, #joy_location li.arrow {
				font: bold 14px "Helvetica Neue", Helvetica;
				color: #fff;
			}
			#eat_location li.arrow em, #eat_location li.arrow em {
				font: 12px "Helvetica Neue", Helvetica;
				color: #fff;
			}

		</style>
		<!--Search API-->
		<script src="https://www.google.com/jsapi"    type="text/javascript"></script>
		<script language="Javascript" type="text/javascript">
			google.load('search', '1', {
				"nooldnames" : true
			});
			function OnLoad() {
				var searchControl = new google.search.SearchControl();
				var options = new google.search.SearcherOptions();
				options.setExpandMode(google.search.SearchControl.EXPAND_MODE_CLOSED);
				var localSearch = new google.search.LocalSearch();
				searchControl.addSearcher(localSearch, options);
				searchControl.addSearcher(new google.search.WebSearch(), options);
				searchControl.addSearcher(new google.search.VideoSearch(), options);
				searchControl.addSearcher(new google.search.BlogSearch(), options);
				searchControl.addSearcher(new google.search.NewsSearch(), options);
				searchControl.addSearcher(new google.search.ImageSearch(), options);
				searchControl.draw(document.getElementById("searchcontrol"), options);
				searchControl.execute("제주 경마공원");
			}


			google.setOnLoadCallback(OnLoad);

		</script>
		<!--
		<script language="Javascript">
		self.resizeTo(320, 480);
		</script>
		</head>
		<body>
		-->
		<!-- 인트로 -->
		<div id="container">
			<div class="toolbar">
				<h1>제주의 말(馬)</h1>
				<p class="button">
					<a class="swap" href="#home">Go!</a>
				</p>
			</div>
		</div>
		<!-- //인트로 -->
		<!-- 메인 -->
		<div id = "home" class = "main">
			<div class = "toolbar">
				<p class="back">
					<a class="fade" href="#container">Intro</a>
				</p>
				<h1>제주의 말(馬)</h1>
			</div>
			<div id = "category" align = "center">
				<p>
					<a href="#joy" class="fade"><img src = "images/joy_btn.png" alt=""/></a>
				</p>
				<p>
					<a href="#eat" class="fade"><img src = "images/eat_btn.png" alt=""/></a>
				</p>
			</div>
		</div>
		<!-- //메인 -->
		<!-- 즐길거리 -->
		<div id="joy" class = "main">
			<div class = "toolbar">
				<p class="back">
					<a href="#home">Home</a>
				</p>
				<h1>제주마 즐길거리!</h1>
			</div>
			<div id="slide">
				<ul>
					<li><img src="images/joy_1.png" alt="">
					</li>
					<li><img src="images/joy_2.png" alt="">
					</li>
					<li><img src="images/joy_3.png" alt="">
					</li>
					<li><img src="images/joy_4.png" alt="">
					</li>
					<li><img src="images/joy_5.png" alt="">
					</li>
					<li><img src="images/joy_6.png" alt="">
					</li>
					<li><img src="images/joy_7.png" alt="">
					</li>
					<li><img src="images/joy_8.png" alt="">
					</li>
				</ul>
				<p class="prev">
					<button>
						&lt;
					</button>
				</p>
				<p class="next">
					<button>
						&gt;
					</button>
				</p>
			</div>
			<div id = "intro_location">
				<ul class = "rounded">
					<li class = "arrow">
						<a href="#joy_intro" class = "pop">즐길거리 소개</a>
					</li>
					<li class = "arrow">
						<a href="#joy_loc" class = "pop">즐길거리 위치</a>
						<small class="counter">20</small>
					</li>
					<li class = "arrow">
						<a href="http://mol.phpfogapp.com/festival" rel="external">지도 찾아보기</a>
						<!--<?php echo $html->link('지도 찾아보기',array('action' => '../festival/'));?>-->
					</li>
					<li class = "arrow">
						<a href="#search" class = "pop">검색</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- 즐길거리 소개글 -->
		<div id="joy_intro" class = "main">
			<div class = "toolbar">
				<p class="back">
					<a href="#joy">Back</a>
				</p>
				<h1>제주마 즐길거리!</h1>
			</div>
			<div id = "joy_introduce">
				<p>
					제주도에는 승마장 20여군데가 자유로와 평화로, 중산간도로 등
					경치가 아름다운 곳에 위치하여 멀리 바다가 보이고, 드넓은 목초지가 눈앞에 펼쳐져 있습니다.
					이러한 곳에서 승마를 하며 일상생활 속 스트레스도 풀고 즐거운 여행의 추억을 만들면 좋을 것 같습니다.
					<br />
					<br />
					'고수목마','징기즈칸의 일대기' 등 각 공연장 마다 특정 주제를 가지고 말과 함께 공연을 합니다.
					제주도에 와서 새로운 형태의 공연을 보고 즐기는 것도 즐거울 듯 합니다.
				</p>
			</div>
		</div>
		<!-- //즐길거리 소개글 -->
		<!-- 즐길거리 위치관련 -->
		<div id="joy_loc" class = "main">
			<div class = "toolbar">
				<p class="back">
					<a href="#joy">Back</a>
				</p>
				<h1>제주마 즐길거리!</h1>
			</div>
			<div id = "joy_location">
				<ul class="rounded">
					<li class="arrow">
						<a href="#">더마 파크</a><em>제주시 한림읍 월림리 산8번지</em>
					</li>
					<li class="arrow">
						<a href="#">동부 승마장</a><em>서귀포시 표선면 성읍리 2873</em>
					</li>
					<li class="arrow">
						<a href="#">멍에 승마장</a><em>서귀포시 성산읍 난산리</em>
					</li>
					<li class="arrow">
						<a href="#">보개관광 승마장</a><em> 제주시 봉개동 275-66</em>
					</li>
					<li class="arrow">
						<a href="#">서광 승마장</a><em>서귀포시 안덕면 서광리 산51번지</em>
					</li>
					<li class="arrow">
						<a href="#">서진 승마장</a><em>제주시 조천읍 교래리 산 11번지</em>
					</li>
					<li class="arrow">
						<a href="#">성읍승마장</a><em>서귀포시 표선면 성읍리 2045-2</em>
					</li>
					<li class="arrow">
						<a href="#">송담 승마장</a><em>제주시 구좌읍 송당리 126번지</em>
					</li>
					<li class="arrow">
						<a href="#">알프스 승마장</a><em>서귀포시 표선면 성읍리 475</em>
					</li>
					<li class="arrow">
						<a href="#">어승생 승마장</a><em>제주시 노형동 14-1번지</em>
					</li>
					<li class="arrow">
						<a href="#">오케이 승마장</a><em>서귀포시 표선면 성읍리 3188</em>
					</li>
					<li class="arrow">
						<a href="#">우리 승마장</a><em>서귀포시 표선면 성읍리 3305-51</em>
					</li>
					<li class="arrow">
						<a href="#">이어도 승마장</a><em>서귀포시 성산읍 수산리 2712번지</em>
					</li>
					<li class="arrow">
						<a href="#">정의 승마장</a><em>서귀포시 표선면 성읍리 2422번지</em>
					</li>
					<li class="arrow">
						<a href="#">제주 경마 공원</a><em>제주시 애월읍 유수암리 1206</em>
					</li>
					<li class="arrow">
						<a href="#">제주 드림랜드</a><em>제주시 애월읍 봉성리 4554번지</em>
					</li>
					<li class="arrow">
						<a href="#">제주 호스 파크</a><em>제주시 애월읍 상가리 산109-1</em>
					</li>
					<li class="arrow">
						<a href="#">제주관관 승마장</a><em>제주시 조천읍 교래리 산60-6</em>
					</li>
					<li class="arrow">
						<a href="#">제주드램랜드 승마장</a><em>제주시 애월읍 봉성리 4554번지</em>
					</li>
					<li class="arrow">
						<a href="#">조랑말타운승마장</a><em>서귀포시 표선면 성읍리 2684</em>
					</li>
					<li class="arrow">
						<a href="#">초원승마장</a><em>서귀포시 상예동 150번지 </em>
					</li>
					<li class="arrow">
						<a href="#">축산진흥원 목마장</a><em>제주시 용강동</em>
					</li>
					<li class="arrow">
						<a href="#">탐라관광승마장</a><em>제주시 조천읍 교래리 42번지</em>
					</li>
					<li class="arrow">
						<a href="#">한라 승마장</a><em>서귀포시 안덕면 동광리 31</em>
					</li>
				</ul>
			</div>
		</div>
		<!-- //즐길거리 위치관련 -->
		<!-- //즐길거리 -->
		<!-- 먹거리 -->
		<div id="eat" class = "main">
			<div class = "toolbar">
				<p class="back">
					<a href="#home">Home</a>
				</p>
				<h1>제주마 먹거리!</h1>
			</div>
			<div id="slide">
				<ul>
					<li><img src="images/eat_1.png" alt="">
					</li>
					<li><img src="images/eat_2.png" alt="">
					</li>
					<li><img src="images/eat_3.png" alt="">
					</li>
					<li><img src="images/eat_4.png" alt="">
					</li>
					<li><img src="images/eat_5.png" alt="">
					</li>
					<li><img src="images/eat_6.png" alt="">
					</li>
					<li><img src="images/eat_7.png" alt="">
					</li>
					<li><img src="images/eat_8.png" alt="">
					</li>
				</ul>
				<p class="prev">
					<button>
						&lt;
					</button>
				</p>
				<p class="next">
					<button>
						&gt;
					</button>
				</p>
			</div>
			<div id = "intro_location">
				<ul class = "rounded">
					<li class = "arrow">
						<a href="#eat_intro" class = "pop">먹거리 소개</a>
					</li>
					<li class = "arrow">
						<a href="#eat_loc" class = "pop">먹거리 위치</a>
						<small class="counter">9</small>
					</li>
					<li class = "arrow">
						<a href="http://mol.phpfogapp.com/food" rel="external">지도 찾아보기</a>
						<!--<?php echo $html->link('지도 찾아보기',array('action' => '../food/'));?>-->
					</li>
					<li class = "arrow">
						<a href="#search" class = "pop">검색</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- 먹거리 소개글 -->
		<div id="eat_intro" class = "main">
			<div class = "toolbar">
				<p class="back">
					<a href="#eat">Back</a>
				</p>
				<h1>제주마 먹거리!</h1>
			</div>
			<div id = "eat_introduce">
				<p>
					제주도의 향토음식중 하나인 말고기는 옛날
					수랏상에 올릴정도로 맛과 영양이 뛰어납니다.
					<br />
					<br />
					제주도의 특색이 가득 느껴지는 말고기를 먹으면서
					제주도 여행을 즐기는 것도 좋을 듯 합니다.
				</p>
			</div>
		</div>
		<!-- //먹거리 소개글 -->
		<!-- 먹거리 위치관련 -->
		<div id="eat_loc" class = "main">
			<div class = "toolbar">
				<p class="back">
					<a href="#eat">Back</a>
				</p>
				<h1>제주마 먹거리!</h1>
			</div>
			<div id = "eat_location">
				<ul class="rounded">
					<li class="arrow">
						<a href="#">고우니 가든</a><em>제주시 조천읍 대흘리 2360</em>
					</li>
					<li class="arrow">
						<a href="#">고우니</a><em>제주시 노형동 2466-1</em>
					</li>
					<li class="arrow">
						<a href="#">더메밀촌</a><em>제주시 연동 260-42</em>
					</li>
					<li class="arrow">
						<a href="#">덕경가든</a><em>제주시 연동 2329-4</em>
					</li>
					<li class="arrow">
						<a href="#">몰이랑 흑도새기랑</a><em>제주시 노형동 291-24</em>
					</li>
					<li class="arrow">
						<a href="#">백마가든</a><em>제주시 오라3동 2337-12</em>
					</li>
					<li class="arrow">
						<a href="#">제주오라성</a><em>제주시 오라2동 194-2</em>
					</li>
					<li class="arrow">
						<a href="#">천마회관</a><em>제주시 이도2동 1063-7</em>
					</li>
					<li class="arrow">
						<a href="#">흑마가든</a><em>제주시 연동 1532-4</em>
					</li>
				</ul>
			</div>
		</div>
		<!-- //먹거리 위치관련 -->
		<!-- //먹거리 -->
		<script>
			$('p.next').click(function() {
				if($('#slide ul').css('left') != "-812px") {
					$('#slide ul').animate({
						"left" : "-=116px"
					}, "slow");
				} else {
					$('#slide ul').animate({
						"left" : "+=812px"
					}, "slow");
				}
			});

			$('p.prev').click(function() {
				if($('#slide ul').css('left') == "0px") {
					$('#slide ul').animate({
						"left" : "-=812px"
					}, "slow");
				} else {
					$('#slide ul').animate({
						"left" : "+=116px"
					}, "slow");
				}
			});

		</script>
		<div id = "search" class = "main">
			<div class="toolbar">
				<h1>search</h1>
				<a class="button back" href="#">Back</a>
			</div>
			<div id="searchcontrol" align="center">
				<ul>
					<li>
						Loading
					</li>
				</ul>
			</div>
		</div>
		</body>
</html>